<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link href="../static/css/indexs.css" type="text/css" rel="stylesheet">
    <script src="../static/js/jQuery_3.7.1.js"></script>
    <script src="../static/js/jquery-1.8.0.js"></script>
    <style>
        .top-01 {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px; /* Adjust to match the height of .top-01 */
            background-color: #f0f3f5;
            z-index: 1000;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            display: flex;
        }

        li {
            margin: 0;
            padding: 0;
        }

        .search-container {
            display: flex;
            align-items: center;
        }

        body {
            margin: 0;
            padding-top: 100px; /* Adjust to match the height of .top-01 */
        }

        /* Optional: Additional styles for list items and images */
        img {
            vertical-align: middle;
        }
        .product {
            transition: box-shadow 0.3s ease;
        }

        .product:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
        }
    </style>
</head>

<body>
<!--头部-->
<div class="i-0101">
    <%@include file="head.html" %>
    <div class="i-0203">
        <div class="headSender01" style="border-radius: 5px; margin-bottom: 20px;">
            <div class="headSender02">
                <p>原神万有铺子</p>
            </div>
            <div class="headSender03">
                <ul class="zhongjian">
                    <li><a href="findAllProductsServlet">全部商品</a></li>
                    <li>
                        数码百货
                        <ul class="dropdown">
                            <li><a href="findAllProductsServlet">挂件摆件</a></li>
                            <li><a href="findAllProductsServlet">毛绒玩偶</a></li>
                            <li><a href="findAllProductsServlet">数码3C</a></li>
                            <li><a href="findAllProductsServlet">日用百货</a></li>
                        </ul>
                    </li>
                    <li>模玩手办</li>
                    <li>
                        服饰
                        <ul class="dropdown" style="z-index: 10;">
                            <li><a href="findAllProductsServlet">短款薄衣装</a></li>
                            <li><a href="findAllProductsServlet">运动服</a></li>
                            <li><a href="findAllProductsServlet">短裤/裙</a></li>
                            <li><a href="findAllProductsServlet">长款薄衣装</a></li>
                            <li><a href="findAllProductsServlet">长款厚衣装</a></li>
                            <li><a href="findAllProductsServlet">长款薄裤装</a></li>
                        </ul>
                    </li>
                    <li>礼盒服装</li>
                    <li>人气爆品</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="head022">
        <div class="head0221"><img src="../static/image/band.webp" style="width: 100%;height: auto; display: block" alt="Band">
        </div>
        <div class="head0222"><img src="../static/image/a01.webp" width="1500"></div>
        <div class="head0223"><img src="../static/image/a02.webp" width="1500"></div>
        <div class="head0224"><img src="../static/image/band01.webp" width="1500"></div>
        <div class="head0225"><img src="../static/image/band04.webp" width="1500"></div>
        <div class="head0226"><img src="../static/image/band02.webp" width="1500"></div>
    </div>
    <div class="buttom00">
        <div class="shoppingShow" style="background-color: #c8dcfc;">
            <c:forEach var="shop" items="${shops}">
                <div class="product">
                    <a href=findCommentServlet?id=${shop.id}">
                        <div class="imgDiv"> <img src="../static/image/${shop.img}" width="235px" height="235px"></div>
                        <div class="shopName">
                            <p style="margin-left: 5px ;display: inline-block"><img src="../static/image/Xin.png" height="18" width="40"/>${shop.shopsInfo}</p >
                            <p>￥<span style="color: #ff6d6d; font-weight: 700; font-size: 18px; ">${shop.price}</span></p >
                        </div>
                    </a >
                </div>
            </c:forEach>
        </div>
    </div>
    <%--底部--%>
    <div class="dibu01">
        <div class="dibu02">
            <img src="../static/image/banner.webp" height="120" width="332"/>
        </div>
        <p id="p01"><a href="#">首页</a><a href="">隐私政策</a><a
                href="">商城服务协议</a><a
                href="">加入我们</a></p>
        <p class="p03">@2021米哈游版权所有|<a>沪公安网备31010402009928号</a>|<a>沪ICP备2021018283号-2</a></p>
        <p class="p03">沪文网【2021】2859-324号|增值电信业务经营许可证：沪B2-2022-20200</p>
        <p class="p03">
            互联网违法不良信息举报电话：021-34203135（工作时间：每天10点-20点）|互联网违法不良信息举报邮箱：tousu@mihoyo.com</p>
        <p class="p03">
            亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门对避免您财产被骗受损而设，请你一旦收到来电，立即接听。</p>
        <div class="Under"><img src="../static/image/Jingcha.webp" height="46" width="116"/><img src="../static/image/Woa.webp" height="46"
                                                                                       width="116"/><img
                src="../static/image/asa.webp" height="46" width="116"/><img src="../static/image/ska.webp" height="46" width="116"/></div>
    </div>
</div>
</body>
</html>

